<!-- 展示个人信息的弹窗，通过传递参数可以选择是包括更改信息的功能等等 -->

<template>
    <div>
        <!--        <el-dialog title="个人信息" v-bind:visible="showAble" v-bind:before-close="closePersonalInformation" width="40%">-->
        <el-divider>个人信息</el-divider>
        <el-form label-position="right" label-width="100px" style="margin: 30px;" v-model="userInformaion">
            <!-- <el-input ></el-input> -->
            <el-form-item label="工号">
                <el-input v-model="userInformaion.userName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="userInformaion.userRealName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="身份">
                <el-input v-model="userInformaion.userType" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="userInformaion.userAge" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
                <el-input v-model="userInformaion.userPhoneNumber" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="部门">
                <el-input v-model="userInformaion.userDepartmentName" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <!--        </el-dialog>-->
    </div>
</template>

<script>
    import axios from "axios"

    export default {
        name: "personalInformaion",
        data: function () {
            return {
                userInformaion: {
                    userId: null,
                    userName: null,
                    userRealName:"",
                    userType: null,
                    userAge: null,
                    userPhoneNumber: null,
                    userDepartmentId: null,
                    userDepartmentName: null
                },
                userPassword: {
                    old: null,
                    new: null
                },
                showAble: false
            }
        },
        props: {
            editAble: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            closePersonalInformation: function () {
                // 关闭当前窗口
                this.$emit("closePersonalInformation");
            },
            changePassowrd: function () {
                // axios.postMessage
            }
        },
        beforeUpdate: function () {
            console.log("personalInformation beforeupdated");
        },
        mounted: function () {
            var _this = this;
            axios.get("http://127.0.0.1:8000/api/user/")
                .then(function (response) {
                    _this.userInformaion.userId = response.data.data.user_id;
                    _this.userInformaion.userName = response.data.data.user_name;
                    _this.userInformaion.userRealName = response.data.data.user_real_name;
                    _this.userInformaion.userType = response.data.data.user_type;
                    _this.userInformaion.userAge = response.data.data.user_age;
                    _this.userInformaion.userPhoneNumber = response.data.data.user_phone_number;
                    _this.userInformaion.userDepartmentId = response.data.data.user_department_id;

                    axios.get("http://127.0.0.1:8000/api/department/")
                        .then(function (response) {
                            console.log("get department")
                            console.log(response.data.data)

                            for (var i = 0; i < response.data.data.length; i++) {
                                if (_this.userInformaion.userDepartmentId == response.data.data[i].department_id) {
                                    _this.userInformaion.userDepartmentName = response.data.data[i].department_name;
                                }
                            }

                        }).catch(function (error) {
                        console.log(error);
                    })

                }).catch(function (error) {
                console.log(error);
            })
        },
    }
</script>

<style>

</style>
